<template>
	<view class="map_page">
		<uni-search-bar @confirm="search" v-model="key" placeholder="输入搜索的关键词"></uni-search-bar>
		<view class="map_container">
			<map
				id="map"
				style="width: 100%;"
				:style="{ height: height-62 + 'px' }"
				:latitude="latitude"
				:longitude="longitude"
				:enable-3D="true"
				:show-compass="true"
				:enable-traffic="true"
				:enable-building="true"
				:show-location="true"
				:scale="16"
				:markers="markers"
				:enable-poi="true"
				:layer-style="'b8d9fd06f66a2d08cbc481a419e7efd8'"
				@markertap="markersClickHandle"
				:polyline="polyline"
			></map>
			<view class="map_tip" v-if="name !== ''">
				<view class="info">
					<view class="map_tip_text">{{ name }}</view>
					<view class="map_tip_text">{{ address }}</view>
				</view>
				<view class="handle"><view class="iconfont icon-map" @click="goToRouteHandle"></view></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			height: 600,
			latitude: getApp().globalData.latitude,
			longitude: getApp().globalData.longitude,
			covers: [],
			markers: [],
			name: '',
			address: '',
			polyline: [],
			distance: '',
			cost: '',
			myAmap: null,
			key: ''
		};
	},
	onLoad(ops) {
		let that = this;
		this.type = ops.t || 'poi';

		console.log(ops);

		this.myAmap = new this._amap.AMapWX({ key: '350d9b19fe28da7951c1b80189b2338f' });
		console.log(this.myAmap);
		uni.getSystemInfo({
			success(res) {
				console.log(res.statusBarHeight, res.titleBarHeight)
				that.height = res.windowHeight;
				// uni.getLocation({
				// 	success(res) {
				// 		that.latitude = res.latitude;
				// 		that.longitude = res.longitude;
				// 	}
				// });
			}
		});
		if (!this.myAmap) return;
		this.myAmap.getRegeo({
			success(res) {
				that.latitude = res[0].latitude;
				that.longitude = res[0].longitude;
				//console.log(res[0].latitude, res[0].longitude, res[0])
				if (that.type === 'poi') {
					that.myAmap.getPoiAround({
						success(data) {
							console.log(data);
							that.markers = data.markers;
							that.name = that.markers[0].name;
							that.address = that.markers[0].address;
							that.index = 0;
						},
						fail(err) {
							console.log(err);
						}
					});
					//this.myAmap.setMapStyle('amap://styles/b8d9fd06f66a2d08cbc481a419e7efd8')
				}
			}
		});
	},
	methods: {
		search(v) {
			if (v.value.replace(/^\s+|\s+$/gim, '') === '') {
				this.$toast('搜索内容不能为空！');
				return;
			}
			let that = this;
			this.myAmap.getPoiAround({
				querykeywords: v.value,
				success(data) {
					console.log(data);
					that.markers = data.markers;
					that.name = that.markers[0].name;
					that.address = that.markers[0].address;
					that.index = 0;
				},
				fail(err) {
					console.log(err);
				}
			});
		},
		markersClickHandle(e) {
			let that = this;
			let index = e.detail.markerId;
			this.name = this.markers[index].name;
			this.address = this.markers[index].address;
			this.index = index;
		},
		goToRouteHandle() {
			this.destinationLatitude = this.markers[this.index].latitude;
			this.destinationLongitude = this.markers[this.index].longitude;
			uni.navigateTo({
				url: '../../pages/map/route?t=route&lat=' + this.destinationLatitude + '&lon=' + this.destinationLongitude + '&name=' + this.name + '&address=' + this.address
			});
		}
	}
};
</script>

<style lang="less">
.map_page {
	.map_container {
		position: absolute;
		top: 104rpx;
		bottom: 0;
		left: 0;
		right: 0;
		.map_tip {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 20rpx;
			background-color: rgba(0, 0, 0, 0.8);
			color: #ffffff;
			font-size: 28rpx;
			display: flex;
			border-top-left-radius: 10rpx;
			border-top-right-radius: 10rpx;
			.info {
				flex: 1;
			}
			.handle {
				width: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.iconfont {
					font-size: 64rpx;
				}
			}
		}
	}
}
</style>
